import React from "react";
import { ProCard, PageContainer } from "@ant-design/pro-components";
import {
  PieChartOutlined,
  BarChartOutlined,
  LineChartOutlined,
  AreaChartOutlined,
} from "@ant-design/icons";

export const Home: React.FC = () => {
  return (
    <PageContainer>
      <ProCard title="数据概览" style={{ marginBottom: 24 }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-around",
            padding: 20,
          }}
        >
          <div style={{ textAlign: "center" }}>
            <PieChartOutlined style={{ fontSize: 48, color: "#1890ff" }} />
            <p style={{ marginTop: 10, fontWeight: "bold" }}>用户分析</p>
          </div>
          <div style={{ textAlign: "center" }}>
            <BarChartOutlined style={{ fontSize: 48, color: "#52c41a" }} />
            <p style={{ marginTop: 10, fontWeight: "bold" }}>销售统计</p>
          </div>
          <div style={{ textAlign: "center" }}>
            <LineChartOutlined style={{ fontSize: 48, color: "#faad14" }} />
            <p style={{ marginTop: 10, fontWeight: "bold" }}>趋势分析</p>
          </div>
          <div style={{ textAlign: "center" }}>
            <AreaChartOutlined style={{ fontSize: 48, color: "#722ed1" }} />
            <p style={{ marginTop: 10, fontWeight: "bold" }}>市场占有率</p>
          </div>
        </div>
      </ProCard>

      <div style={{ display: "flex", gap: 24 }}>
        <ProCard title="近期活动" style={{ flex: 1 }}>
          <div style={{ padding: 16 }}>
            <p>1. 系统更新：优化了用户体验</p>
            <p>2. 新功能上线：数据分析模块</p>
            <p>3. 服务升级：提高了系统稳定性</p>
            <p>4. 安全更新：修复了已知漏洞</p>
          </div>
        </ProCard>

        <ProCard title="使用指南" style={{ flex: 1 }}>
          <div style={{ padding: 16 }}>
            <p>1. 如何创建新的项目</p>
            <p>2. 数据分析报表导出</p>
            <p>3. 用户权限管理</p>
            <p>4. 系统配置详解</p>
          </div>
        </ProCard>
      </div>
    </PageContainer>
  );
};
